<template>
  <div class="panel">
    <div class="table-container">
      <table class="warning-table">
        <thead>
          <tr>
            <th>时间</th>
            <th>区域</th>
            <th>类型</th>
            <th>警告内容</th>
            <th>状态</th>
          </tr>
        </thead>
        <tbody ref="tbodyRef" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
          <tr v-for="(item, index) in displayData" :key="index">
            <td>{{ item.time }}</td>
            <td>{{ item.area }}</td>
            <td>
              <span class="type" :class="item.type">{{ item.typeText }}</span>
            </td>
            <td>{{ item.content }}</td>
            <td>
              <span class="status" :class="item.status">{{ item.statusText }}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

const tbodyRef = ref<HTMLElement | null>(null)
let scrollInterval: number | null = null

// 模拟数据
const warningData = ref([
  { time: '10:30', area: 'A区', type: 'temperature', typeText: '温度', content: '温度超过35℃，需要降温', status: 'urgent', statusText: '紧急' },
  { time: '10:25', area: 'B区', type: 'humidity', typeText: '湿度', content: '湿度低于40%，需要加湿', status: 'warning', statusText: '警告' },
  { time: '10:20', area: 'C区', type: 'light', typeText: '光照', content: '光照强度过高', status: 'warning', statusText: '警告' },
  { time: '10:15', area: 'D区', type: 'co2', typeText: 'CO2', content: 'CO2浓度偏低', status: 'normal', statusText: '一般' },
  { time: '10:10', area: 'E区', type: 'soil', typeText: '土壤', content: '土壤水分不足', status: 'normal', statusText: '一般' },
  { time: '10:05', area: 'F区', type: 'nutrient', typeText: '养分', content: '氮元素含量偏低', status: 'normal', statusText: '一般' },
  { time: '10:00', area: 'G区', type: 'temperature', typeText: '温度', content: '温度波动较大', status: 'normal', statusText: '一般' },
  { time: '09:55', area: 'H区', type: 'humidity', typeText: '湿度', content: '湿度偏高', status: 'normal', statusText: '一般' },
  { time: '09:50', area: 'I区', type: 'light', typeText: '光照', content: '光照不足', status: 'normal', statusText: '一般' },
  { time: '09:45', area: 'J区', type: 'co2', typeText: 'CO2', content: 'CO2浓度正常', status: 'normal', statusText: '一般' }
])

// 复制数据以实现无限循环
const displayData = ref([...warningData.value, ...warningData.value])

// 开始自动滚动
const startAutoScroll = () => {
  if (!tbodyRef.value) return
  
  let scrollTop = 0
  const rowHeight = 40 // 每行高度
  const singleHeight = rowHeight * warningData.value.length // 单次滚动高度
  
  scrollInterval = window.setInterval(() => {
    scrollTop += 1
    if (scrollTop >= singleHeight) {
      scrollTop = 0
    }
    tbodyRef.value!.scrollTop = scrollTop
  }, 24) // 每24ms滚动1px
}

// 添加鼠标悬停暂停功能
const handleMouseEnter = () => {
  if (scrollInterval) {
    clearInterval(scrollInterval)
    scrollInterval = null
  }
}

const handleMouseLeave = () => {
  if (!scrollInterval) {
    startAutoScroll()
  }
}

onMounted(() => {
  startAutoScroll()
})

onUnmounted(() => {
  if (scrollInterval) {
    clearInterval(scrollInterval)
  }
})
</script>

<style scoped>
.panel {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(18, 161, 127, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.table-container {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.warning-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: fixed;
}

.warning-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(18, 161, 127, 0.2);
  display: table;
  width: 100%;
}

.warning-table th {
  padding: 10px;
  text-align: left;
  color: #33ffd0;
  font-weight: normal;
  border-bottom: 1px solid rgba(51, 255, 208, 0.3);
}

.warning-table th:nth-child(1),
.warning-table td:nth-child(1) {
  width: 70px;  /* 时间列 */
}

.warning-table th:nth-child(2),
.warning-table td:nth-child(2) {
  width: 70px;  /* 区域列 */
}

.warning-table th:nth-child(3),
.warning-table td:nth-child(3) {
  width: 70px;  /* 类型列 */
}

.warning-table th:nth-child(4),
.warning-table td:nth-child(4) {
  width: 200px;  /* 警告内容列 */
}

.warning-table th:nth-child(5),
.warning-table td:nth-child(5) {
  width: 70px;  /* 状态列 */
  text-align: center;
}

.warning-table tbody {
  display: block;
  height: 240px; /* 固定可见区域高度 */
  overflow: hidden;
  position: relative;
}

.warning-table tbody tr {
  display: table;
  width: 100%;
  height: 48px;
  position: relative;
}

.warning-table tbody tr:hover {
  background: rgba(51, 255, 208, 0.1);
}

.warning-table td {
  padding: 10px;
  color: #fff;
  border-bottom: 1px solid rgba(51, 255, 208, 0.1);
}

.type {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 13px;
}

.type.temperature {
  background: rgba(245, 108, 108, 0.2);
  color: #f56c6c;
}

.type.humidity {
  background: rgba(230, 162, 60, 0.2);
  color: #e6a23c;
}

.type.light {
  background: rgba(144, 147, 153, 0.2);
  color: #909399;
}

.type.co2 {
  background: rgba(64, 158, 255, 0.2);
  color: #409EFF;
}

.type.soil {
  background: rgba(103, 194, 58, 0.2);
  color: #67C23A;
}

.type.nutrient {
  background: rgba(156, 39, 176, 0.2);
  color: #9C27B0;
}

.status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 13px;
}

.status.urgent {
  background: rgba(245, 108, 108, 0.2);
  color: #f56c6c;
}

.status.warning {
  background: rgba(230, 162, 60, 0.2);
  color: #e6a23c;
}

.status.normal {
  background: rgba(144, 147, 153, 0.2);
  color: #909399;
}

/* 自定义滚动条样式 */
.warning-table tbody::-webkit-scrollbar {
  width: 6px;
}

.warning-table tbody::-webkit-scrollbar-track {
  background: rgba(51, 255, 208, 0.1);
  border-radius: 3px;
}

.warning-table tbody::-webkit-scrollbar-thumb {
  background: rgba(51, 255, 208, 0.3);
  border-radius: 3px;
}

.warning-table tbody::-webkit-scrollbar-thumb:hover {
  background: rgba(51, 255, 208, 0.5);
}
</style> 